import React, { useState } from 'react';
import moment from 'moment';
import './scss/Calendar.scss'; // 样式文件

const Calendar = ({ calendarVoList, recordInfoDetail }) => {
    const [selectedDate, setSelectedDate] = useState(moment().format('YYYY-MM-DD 00:00:00')); // 追踪当前选中的日期，初始化为 null
    const renderCalendar = () => {
        return calendarVoList.map((monthData, idx) => {
            const { month, calendarDetaiForManageVoList } = monthData;

            // 获取当前月份第一天是星期几
            const firstDayOfWeek = calendarDetaiForManageVoList[0].weekNo; // 假设第一项就是第一天的数据
            const emptyDays = firstDayOfWeek - 1; // 需要插入的空白占位符数量
            // 构建一个有空白占位符的日期数组
            let calendarDays = [];

            // 插入空白占位符
            for (let i = 0; i < emptyDays; i++) {
                calendarDays.push({ date: null }); // 使用 null 表示空位
            }

            // 将日期数据添加到数组中
            calendarDays = calendarDays.concat(calendarDetaiForManageVoList);
            // console.log(calendarDays, 'calendarDays');
            // 创建日历表格 
            return (
                <div key={month} className={"calendar-month-container " + (idx === 0 ? 'is_first' : '')}>
                    <h2 className="calendar-month">{month}月</h2>
                    <div className="calendar-body">
                        <div className="calendar-months">
                            <div className="calendar-week">
                                {calendarDays.map((dateData, index) => {
                                    // 根据属性设置不同的类名和标签
                                    let className = 'calendar-day';
                                    let label = '';
                                    // console.log(dateData, 'dateData');
                                    if (dateData.beWorkday === "1") {
                                        className += ' workday';
                                        label = '补班';
                                    } else if (dateData.beHoliday === "1") {
                                        className += ' holiday';
                                        label = '节日';
                                    } else if (dateData.beActivityDay === "1") {
                                        className += ' activity';
                                    }
                                    else if (dateData.beRecordEdit === "0" && selectedDate !== dateData.date) {
                                        className += ' haveContent';
                                    }
                                    else if (dateData.beRecordEdit === "1" && selectedDate !== dateData.date) {
                                        className += ' haveRecord';
                                    }
                                    // else if (dateData.beToday === "1") {
                                    //     setSelectedDate(dateData.date);
                                    // }
                                    if (dateData.date) {
                                        className += ' clickable';
                                    }
                                    if (selectedDate === dateData.date) {
                                        className += ' selected';
                                    }

                                    const handleDateClick = () => {
                                        if (dateData.date) {
                                            setSelectedDate(dateData.date);
                                            recordInfoDetail(dateData?.recordId, dateData.date);
                                        }
                                    };

                                    return (
                                        <div key={index} onClick={() => handleDateClick(dateData)} className={`${className} ${dateData.date ? '' : 'empty'}`}>
                                            {dateData.date ? dateData.beToday === "1" ? '今' : new Date(dateData.date).getDate() : ''}
                                            {dateData.beHoliday === "1" && <div className="holiday-label">节日</div>}
                                            {dateData.beWorkday === "1" && <div className="workday-label">补班</div>}
                                        </div>
                                    );
                                })}
                            </div>
                        </div>
                    </div>
                </div>
            );
        });
    };

    return (
        <div className="calendar-container">
            <div className="fixed-weekdays">
                {['一', '二', '三', '四', '五', '六', '日'].map((day, index) => (
                    <div key={index} className="fixed-weekday">{day}</div>
                ))}
            </div>
            {renderCalendar()}
        </div>
    );
};

export default Calendar;
